<template>
  <div  ref="horizontalBar" :style="{width:width,height:height}"></div>
</template>
<script>
export default {
  name: 'HorizontalBar',
  data() {
    return {
      titleList:[],
      dataList:[],
      myChart:null
    }
  },
  props:{
    color:{
      type:Array,
      default:()=>[]
    },
    barName:{
      type:Array,
      default:()=>[]
    },
    barData:{
      type:Array,
      default:()=>[]
    },
    // 提示框文本
    seriesName:{
      type:String,
      default:""
    },
    unit:{
      type:String,
      default:"分钟"
    },
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    // 是否堆叠
    stack:{
      type:Boolean,
      default:false
    },
    areaList:{
      type:Array,
      default:()=>[]
    }
    // data:{
    //   type:Object,
    //   default:()=>{}
    // }
  },
  watch:{
    barName:{
      handler(val){
        this.titleList = val;
      },
      deep:true,
      // immediate:true
    },
    barData:{
      handler(val){
        this.dataList = val;
        this.getEchart();
      },
      deep:true,
      // immediate:true
    }
  },
  computed:{
    
  },
  mounted() {
  },

  methods: {
    getEchart() {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.myChart != null &&
        this.myChart != '' &&
        this.myChart != undefined
      ) {
        this.myChart.dispose()
      }
      this.myChart = this.$echarts.init(this.$refs.horizontalBar) //创建echarts实例化对象
      this.myChart.clear(); //清空画布数据
      let _this = this;
      let end = this.titleList.length >= 15 ?25:100
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            align: 'left',
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter:function(params){
            var relVal = params[0].name;
            relVal += '<br/>' + params[0].marker+_this.seriesName+'：' + (params[0].value?params[0].value:0) + _this.unit
            return relVal
          },
        },
        grid: {
          left: '8%',
          top: '2%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        dataZoom:[
          {
            type: 'slider',
            orient:"vertical",
            realtime: true,
            start: 0,
            end: end,  // 初始展示40%
            width: 4,
            left:0,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          },
        ],
        xAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#DDD'
              }
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLine:{
              show:true
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            data:this.titleList,
            inverse: true
          }
        ],
        series: []
      };
      if (this.stack) {
        delete option.tooltip.formatter;
        this.dataList.map((item,i)=>{
          option.series.push(
            {
              name:  _this.areaList[i],
              type: 'bar',
              barWidth: 16,
              stack: 'total',
              label: {
                show: false
              },
              // emphasis: {
              //   focus: 'series'
              // },
              data: item.data
            },
          );
        })
      }else{
        let lineDataATT = []
        this.dataList.forEach((v, i) => {
          lineDataATT.push({
            coords: [
              [i, 0],
              [i, v - 0.02]
            ]
          })
        })
        option.series.push(
          {
            type: 'bar',
            barWidth: 10,
            data: this.dataList,
            itemStyle: {
              //通常情况下：
              normal: {
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: this.color[1]
                    },
                    {
                      offset: 1,
                      color: this.color[0]
                    }
                  ],
                },
                barBorderRadius: [0, 15, 15, 0]
              }
            }
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 2,
            effect: {
              show: true,
              period: 3,
              trailLength: 0.5,
              color: 'rgba(255, 255, 255, .2)',
              //symbol: 'rect',
              symbolSize: 5
            },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 0,
                curveness: 0
              }
            },
            data: lineDataATT
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            zlevel: 2,
            effect: {
              delay: 0.5,
              show: true,
              period: 2,
              trailLength: 0.5,
              color: 'rgba(255, 255, 255, .2)',
              //symbol: 'rect',
              symbolSize: 5
            },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 0,
                curveness: 0
              }
            },
            data: lineDataATT
          }
        )
      }
      this.myChart.setOption(option)
      this.myChart.on("click",function(data){
        _this.$store.commit("setSkStudentId",data.data.stuId);
        let lifeData = {
          detailName:"睡眠",
          dateType:"week",
          stuSleepInfoShow:false
        }
        _this.$emit("lifeData",lifeData);
      })
      window.addEventListener("resize", ()=>{
        _this.myChart.resize();
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
